<template>
  <div>
    <el-table :data="steps" style="width: 100%" fit>
      <!-- 步骤顺序 -->
      <el-table-column prop="order" label="步骤顺序" width="100"/>
      <!---->
      <!-- 步骤名称 -->
      <el-table-column prop="stepName" label="步骤名称" width="150"/>
      <!---->
      <!-- 预期结果 -->
      <el-table-column prop="expected" label="预期结果"/>
      <!---->
    </el-table>
  </div>
</template>

<script setup lang="ts">

/**
 * 递归表格组件 - 展示步骤和子步骤
 */
interface StepI {
  id: number;
  order: number;
  stepName: string;
  expected: string;
  subSteps: StepI[];
  parent: number | null;
}

defineProps<{ steps: StepI[]; }>();

/**
 * 判断是否有任何步骤包含子步骤，用于动态显示 expand 列
 */
// const hasExpandableSteps = (steps: StepI[]): boolean => {
//   return steps.some((step) => step.subSteps && step.subSteps.length > 0);
// };
// const filteredSteps = computed(() => steps.filter((step) => step.parent === null));

</script>

<style scoped>
.el-table {
  margin-bottom: 20px;
}
</style>
